<template>
	<view>
		<u-navbar title="充值记录" :custom-back="back"></u-navbar>
		<view v-if="page=='page'">
			<view class="Uzfczitem" v-for="item in Uzfcz">
				<view class="">
					<view style="color: #2093f5;font-weight: 600;font-size: 26px;margin-bottom: 10rpx;">
						{{item.jecz/100||item.je/100}}元
					</view>

					<view class="" style="font-size: 28rpx;color: #8f8f94;">
						{{$z.$t("充值时间")}}：{{item.sjzfc}}
					</view>
				</view>
				<view>
					<u-button type="primary" plain shape="circle" @click="zdxqfn(item)">
						{{$z.$t("查看详情退款")}}</u-button>
				</view>

			</view>
			<!-- 	<view
				style=" text-align: center;background-color: #efeff4;font-size: 30rpx;line-height: 80rpx;color: #777;">
				{{blsj}}
			</view> -->
		</view>
		<view v-else-if="page=='pagexq'">
			<view class=""
				style="text-align: center;padding: 60rpx 0 20rpx 0; display: flex;justify-content: center;align-items: center;font-size: 40rpx;">
				<view class=" iconfont iconzhifu" style=" background: #2093f5;
				    padding: 10px;
				    color: #FFFFFF;
				    border-radius: 50%;
				    font-size: 16px;
				    margin-right: 10px;">
				</view>
				{{$z.$t("用户充值")}}
			</view>
			<view style="text-align: center;
    font-weight: 700;
    font-size: 26px;
    line-height: 50px;">
				{{dqitem.je/100}}{{$z.$t("元")}}
			</view>
			<view class="" v-for="item in xsstr"
				style="display: flex;align-items: center;line-height: 60rpx;padding-left: 20rpx;"
				:style="{color:item.label==$z.$t(' 支付金额')?'#2093f5':item.label==$z.$t('退款金额') ?'#f87a7d':''}">
				<view class="" style="display: flex;justify-content: space-between;color:#8f8f94 ;width: 180rpx;">
					{{$z.$t(item.label)}}
				</view>
				{{$z.$t(item.value)}}
			</view>
			<view style="padding-left: 20rpx;" v-if="UzfczTK.length!=0||Uzfcz6Search.length!=0">
				{{$z.$t("退款记录")}}
			</view>
			<view v-for="(item,index) in UzfczTK" :key="index">
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款时间")}}
					</view>
					{{item.sjc}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款金额")}}
					</view>
					{{item.jetk/100}}{{$z.$t("元")}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款信息")}}
					</view>
					{{item.msg=='succeed'?$z.$t("成功"):item.msg}}
				</view>
			</view>
			<!-- +UzfczTK.length -->
			<view v-for="(item,index) in Uzfcz6Search" :key="index">
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款时间")}}
					</view>
					{{item.sjtk||item.sjc}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("支付宝姓名")}}
					</view>
					{{item.zfbxm}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("支付宝账号")}}
					</view>
					{{item.zfb}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款金额")}}
					</view>
					{{item.jetk}}{{$z.$t("元")}}
				</view>
				<view class="listitem">
					<view class="label">
						{{$z.$t("退款状态")}}
					</view>
					{{item.b_op=="1"?$z.$t("已退款"):$z.$t("退款中")}}
				</view>
				<view class="listitem" v-if="item.msg">
					<view class="label">
						{{$z.$t("退款信息")}}
					</view>
					<view class="" style="color: #dd524d;width: 0;flex: 1;">
						{{item.msg=='succeed'?$z.$t('成功'):`${item.msg},${$z.$t('请修改信息后提交')}.`}}
					</view>
				</view>
				<view v-if="item.b_op==0" style="padding: 20rpx;">
					<u-button :loading="loading" type="primary"
						@click="Uzfcz6Searchedtpagefn(item)">{{$z.$t("修改支付宝信息")}}</u-button>
				</view>
			</view>

			<z-mine-list v-if="jektfn()!=0" @click="page='pagetx';txje=''">
				{{$z.$t("账单提现")}}
			</z-mine-list>
		</view>
		<view v-else-if="page=='Uzfcz6Searchedtpage'">
			<formz ref="formz" :inputs="inputs" :data="data"></formz>

			<view style="padding: 20rpx;line-height: 32rpx;">
				{{$z.$t("温馨提示：请核对好所填写的信息。")}}
			</view>
			<view class="" style="margin-top: 60rpx;padding: 20rpx;">
				<u-button :loading="loading" type="primary"
					@click="Uzfcz6Searchedtbtntapfn()">{{$z.$t("修改")}}</u-button>
			</view>
		</view>
		<view v-else-if="page=='UzfczTK6OK'">
			<formz ref="formz" :inputs="inputs" :data="data"></formz>
			<view style="padding: 20rpx 20rpx 0 20rpx;line-height: 32rpx;">

				{{$z.$t("当前订单可退款金额为{0}元。",dqitem.UzfczTK6)}}
			</view>
			<view style="padding: 20rpx;line-height: 32rpx;">
				{{$z.$t("温馨提示：请核对好所填写的信息。")}}
			</view>
			<view class="" style="margin-top: 60rpx;padding: 20rpx;">
				<u-button :loading="loading" type="primary" @click="UzfczTK6OKbtntapfn()">{{$z.$t("提交")}}</u-button>
			</view>
		</view>
		<view class="" v-else-if="page=='pagetx'" style="padding: 20rpx;">
			<view style="box-shadow: 0 1px 6px #eeeeee;border-radius: 10rpx;padding: 20rpx;">
				<view class="" style="height: 50rpx;display: flex;align-items: center;">
					<text style="width: 160rpx;display: inline-block;;">{{$z.$t("到账方式")}}</text>
					<text style="color: #2093f5;">{{$z.$t("原路返回")}}</text>
				</view>
				<view class="" style="height: 50rpx;display: flex;align-items: center;">
					<text style="width: 160rpx;display: inline-block;;"></text>
					<text style="color: #969696;">{{$z.$t("到账时间根据银行结算时间而定")}}</text>
				</view>
				<view class="" style="height: 50rpx;display: flex;align-items: center;">
					{{$z.$t("提现金额")}}
				</view>
				<view class="" style="display: flex;align-items: center;">
					<view class=""
						style="height: 50px;width: 50px;font-size: 30px;text-align: center; line-height: 50px;">
						￥
					</view>
					<!-- :custom-style="customStyle" -->
					<u-input :disabled="dqitem.Uzfcz6falg=='0'" border="none" type="digit" height="100" v-model="txje"
						style="width: 100%;" placeholder=" " />
				</view>
				<view class="" style="display: flex; color: #8f8f94;">
					{{$z.$t(kyyestr)}}<text @click="qbtxfn()"
						style="color:#2093f5;margin-left: 10rpx;">{{$z.$t("全部提现")}}</text>
				</view>
				<view class="" style="margin-top: 20rpx;">
					<u-button :loading="dqitem.Uzfcz6falg=='0'||loading" :type="dqitem.Uzfcz6falg=='0'?'':'primary'"
						@click="UTKfn()">{{$z.$t("确认提现")}}</u-button>
				</view>

			</view>

			<view class="" v-if="dqitem.Uzfcz6falg=='0'">
				<view style="padding: 20rpx 10rpx;color: #333;">
					{{$z.$t("温馨提示：1、因受微信和支付宝规则的限制，充值6个月内退款不收取手续费，超过6个月（支付宝超3个月，微信超6个月）将无法通过充值订单原路径退款且退款提现会收取千分之六的手续费。为了维护您的利益，请填写如下表格，我们的工作人员将会在您提交后的7个工作日内将金额通过支付宝返还给您，请注意查收。")}}

				</view>
				<view class="">
					<u-button type="primary" @click="tkUzfcz60()">{{$z.$t("去填表")}}</u-button>
				</view>
			</view>
		</view>
		<zmodal ref="zmodal"></zmodal>

	</view>
</template>

<script>
	import config from "@/config/index.js"
	export default {
		data() {
			return {
				loading: false,
				umodaldata: {},
				Uzfcz: [],
				page: "page",
				dqitem: {},
				UzfczTK: [],
				Uzfcz6Search: [],
				xsstr: [],
				inputs: [],
				data: {},
				txje: "",
				// customStyle: {
				// 	fontSize: "20px",
				// 	fontWeight: "bold"
				// }
			}
		},
		onLoad() {
			this.getdata();
			this.$store.dispatch("user/getuser")

		},
		computed: {

			blsj() {
				if (uni.$z.IsWeixinOrAlipay() == 'weixin') {
					return 6
				} else {
					return 3
				}
			},
			USearch() {
				return this.$store.state.user.USearch;
			},
			kyyestr() {
				return `${this.$z.$t("当前余额")}${this.USearch.je/100}${this.$z.$t("元")}${this.$z.$t("可提现金额")}：${this.jektfn()/100}${this.$z.$t("元")}`;

			}
		},
		methods: {
			Uzfcz6Searchedtpagefn(item) {
				this.inputs = [{
					label: this.$z.$t("支付宝姓名"),
					value: "zfbxm",
					rule: [{
						required: true,
						message: this.$z.$t("请填写支付宝姓名"),
						trigger: "change",
					}]
				}, {
					label: this.$z.$t("支付宝账号"),
					value: "zfb",
					rule: [{
						required: true,
						message: this.$z.$t("请填写支付宝账号"),
						trigger: "change",
					}]
				}, ]
				this.data = {
					zfbxm: item.zfbxm,
					zfb: item.zfb,
					id: item.id
				};
				// inputs: [],
				// data: {},
				this.page = 'Uzfcz6Searchedtpage'
				this.$nextTick(() => {

					this.$refs.formz.init()
				})
			},
			async Uzfcz6Searchedtbtntapfn() {
				let reqdata = await this.$refs.formz.validate();
				this.loading = true;
				await this.$z.request("/Uzfcz6Searchedt", reqdata)
				this.loading = false;
				this.$refs.zmodal.init({
					content: this.$z.$t("操作成功"),
					confirm: async () => {
						await this.$store.dispatch("user/getUSearch")
						this.$z.back()
					}
				})
			},
			tkUzfcz60() {
				this.inputs = [{
					label: this.$z.$t("支付宝姓名"),
					value: "zfbxm",
					rule: [{
						required: true,
						message: this.$z.$t("请填写支付宝姓名"),
						trigger: "change",
					}]
				}, {
					label: this.$z.$t("支付宝账号"),
					value: "zfb",
					rule: [{
						required: true,
						message: this.$z.$t("请填写支付宝账号"),
						trigger: "change",
					}]
				}, ]
				this.data = {};
				// inputs: [],
				// data: {},
				this.page = 'UzfczTK6OK'
				this.$nextTick(() => {

					this.$refs.formz.init()
				})
			},
			async UzfczTK6OKbtntapfn() {
				let reqdata = await this.$refs.formz.validate();
				reqdata.ddh = this.dqitem.ddh;

				this.$refs.zmodal.init({
					content: this.$z.$t("确认提现，确认？"),
					showcancel: true,
					confirm: async () => {
						this.loading = true;
						let par = await uni.$z.request("/UzfczTK6OK", reqdata)
						this.loading = false;
						setTimeout(() => {

							this.$refs.zmodal.init({
								content: this.$z.$t("操作成功"),
								confirm: async () => {
									await this.$store.dispatch("user/getUSearch")
									this.$z.back()
								}
							})
						}, 100)
					}
				})


			},
			UTKfn() {
				let je = Number(this.txje) * 100
				je = parseInt(je);
				if (!je || je <= 0) {
					uni.showToast({
						title: this.$z.$t("请输入提现金额"),
						icon: "none"
					});
					return;
				}
				let jemax = Number(this.jektfn());
				if (jemax < je) {
					uni.showToast({
						title: this.$z.$t("超过本次可提现金额"),
						icon: "none"
					});
					return;
				}
				this.$refs.zmodal.init({
					content: this.$z.$t("确认提现，确认？"),
					showcancel: true,
					confirm: async () => {
						this.loading = true;
						let par = await uni.$z.request("/UzfczTKOp", {
							je: je,
							ddh: this.dqitem.ddh,
						})
						this.loading = false;
						if (par[0].par == "succeed") {
							setTimeout(() => {
								this.$refs.zmodal.init({
									content: this.$z.$t("提现成功"),
									confirm: async () => {
										await this.$store.dispatch("user/getUSearch")
										this.$z.back()
									}
								})
							}, 100)

						} else {
							let str = config.pars[par[0]] ? config.pars[par[0]] : this.$z.$t("未知错误")

							uni.showToast({
								title: str,
								icon: "none"
							});

						}
					}
				})


			},
			qbtxfn() {
				this.txje = Number(this.jektfn()) / 100
			},
			UzfczTKjetks() {
				var jetk = 0;
				this.UzfczTK.forEach(function(e) {
					if (e.msg == 'succeed') {
						jetk += Number(e.jetk);
					}
				});
				return jetk;
			},
			jektfn() {
				if (this.Uzfcz6Search.length != 0) {
					return 0
				}
				let USearchje = parseInt(this.USearch.je);
				let dqUzfczje = this.dqitem.je ? parseInt(this.dqitem.je) : 0;
				let dqUzfczjeyh = this.dqitem.jecz ? this.dqitem.jecz - dqUzfczje : 0;
				let ytje = this.UzfczTKjetks();
				dqUzfczje = dqUzfczje - ytje;
				if (ytje != 0) {
					dqUzfczjeyh = 0;
				}
				if (dqUzfczje <= 0) {
					dqUzfczje = 0;
				}
				if (USearchje == 0) {
					return USearchje;
				}
				let jetkmax = USearchje - dqUzfczjeyh;
				if (jetkmax <= 0) {
					return 0;
				}
				if (USearchje >= dqUzfczje + dqUzfczjeyh) {
					return dqUzfczje;
				} else {
					return jetkmax;
				}
			},
			back() {
				if (this.page != 'page') {
					this.page = "page"
				} else {
					this.$z.back()
				}
			},
			async zdxqfn(item) {
				this.page = "pagexq";
				this.dqitem = item;
				this.UzfczTK = await uni.$z.request("/UzfczTK", {
					ddh: item.ddh
				});
				this.Uzfcz6Search = []
				let xsstr = [{
					value: this.$z.$t("用户充值"),
					label: this.$z.$t("类型")
				}, {
					value: item.ddh,
					label: this.$z.$t("订单号")
				}, {
					value: this.USearch.je / 100 + "元",
					label: this.$z.$t("余额")
				}, {
					value: item.je / 100 + "元",
					label: this.$z.$t("支付金额")

				}, {
					value: item.jecz ? item.jecz / 100 + this.$z.$t("元") : item.je / 100 + this.$z.$t("元"),
					label: this.$z.$t("充值金额")
				}, {
					value: item.sjzfc,
					label: this.$z.$t("充值时间")
				}]
				if (this.UzfczTK.length != 0) {
					let tkje = 0;
					this.UzfczTK.forEach(function(e) {
						if (e.msg == 'succeed') {
							tkje += parseFloat(e.jetk);
						}

					})
					xsstr.push({
						value: tkje / 100 + '元',
						label: this.$z.$t("退款金额")
					})
				}
				if (item.Uzfcz6falg == '0') {

					this.Uzfcz6Search = await uni.$z.request("/Uzfcz6Search", {
						ddh: item.ddh
					});

					if (this.Uzfcz6Search.length == 0) {
						let UzfczTK6 = await uni.$z.request("/UzfczTK6", {
							ddh: item.ddh
						});
						UzfczTK6 = UzfczTK6.length == 1 ? UzfczTK6[0] : {
							je: "0"
						}
						this.dqitem.UzfczTK6 = UzfczTK6.je;
						xsstr.push({
							value: UzfczTK6.je + this.$z.$t("元"),
							label: this.$z.$t("可退金额")
						})
					}

				}

				// 退款金额
				this.xsstr = xsstr;
			},
			async getdata() {
				let Uzfcz = await uni.$z.request("/Uzfcz6");

				let t = this.$z.timefn.gettimemmt(this.blsj)

				Uzfcz.forEach(e => {
					let num = this.$z.timefn.getUTCtimeceil(t, e.sjzfc)
					e.Uzfcz6falg = num >= 0 ? '1' : '0'
				})
				this.Uzfcz = Uzfcz.reverse()

				this.page = "page"
			}
		}
	}
</script>

<style lang="scss">
	input[type="number"] {
		background: none;
		border: 0;
	}

	.listitem {
		display: flex;
		align-items: center;
		padding: 10px 0;
		line-height: 20px;
		padding-left: 20rpx;

		.label {

			display: flex;
			justify-content: space-between;
			color: #8f8f94;
			width: 180rpx
		}

		.value {}
	}

	.Uzfczitem {
		display: flex;
		justify-content: space-between;
		padding: 22rpx 30rpx;
		align-items: center;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			height: 1px;
			background: #eee;
			left: 15px;
			right: 0;
		}
	}
</style>